import { Graph, Shape } from '@antv/x6'
import { ref } from 'vue'

export class X6Utils {
  constructor(containerRef, options = {}) {
    this.graph = ref(null)
    this.initGraph(containerRef, options)
  }

  // 初始化画布
  initGraph(containerRef, options) {
    const defaultOptions = {
      background: {
        color: '#F2F7FA',
      },
      grid: {
        visible: true,
        type: 'doubleMesh',
        args: [
          {
            color: '#eee',
            thickness: 1,
          },
          {
            color: '#ddd',
            thickness: 1,
            factor: 4,
          },
        ],
      },
      panning: {
        enabled: true,
        modifiers: 'shift',
      },
      mousewheel: {
        enabled: true,
        zoomAtMousePosition: true,
        modifiers: 'ctrl',
        minScale: 0.5,
        maxScale: 3,
      },
      connecting: {
        router: 'manhattan',
        connector: 'rounded',
        anchor: 'center',
        connectionPoint: 'anchor',
        allowBlank: false,
        snap: {
          radius: 20,
        },
        createEdge() {
          return new Shape.Edge({
            attrs: {
              line: {
                stroke: '#A2B1C3',
                strokeWidth: 2,
                targetMarker: {
                  name: 'block',
                  width: 12,
                  height: 8,
                },
              },
            },
            zIndex: 0,
          })
        },
        validateConnection({ targetMagnet }) {
          return !!targetMagnet
        },
      },
      highlighting: {
        magnetAdsorbed: {
          name: 'stroke',
          args: {
            attrs: {
              fill: '#5F95FF',
              stroke: '#5F95FF',
            },
          },
        },
      },
      ...options,
    }

    this.graph.value = new Graph({
      container: containerRef.value,
      ...defaultOptions,
    })

    return this.graph.value
  }

  // 方法1：创建节点
  createNode(config) {
    const defaultConfig = {
      shape: 'rect',
      width: 100,
      height: 40,
      label: '新建节点',
      attrs: {
        body: {
          stroke: '#5F95FF',
          strokeWidth: 1,
          fill: '#EFF4FF',
        },
        label: {
          fontSize: 12,
          fill: '#262626',
        },
      },
      ports: {
        groups: {
          top: {
            position: 'top',
            attrs: {
              circle: {
                r: 4,
                magnet: true,
                stroke: '#5F95FF',
                strokeWidth: 1,
                fill: '#fff',
                style: {
                  visibility: 'hidden',
                },
              },
            },
          },
          right: {
            position: 'right',
            attrs: {
              circle: {
                r: 4,
                magnet: true,
                stroke: '#5F95FF',
                strokeWidth: 1,
                fill: '#fff',
                style: {
                  visibility: 'hidden',
                },
              },
            },
          },
          bottom: {
            position: 'bottom',
            attrs: {
              circle: {
                r: 4,
                magnet: true,
                stroke: '#5F95FF',
                strokeWidth: 1,
                fill: '#fff',
                style: {
                  visibility: 'hidden',
                },
              },
            },
          },
          left: {
            position: 'left',
            attrs: {
              circle: {
                r: 4,
                magnet: true,
                stroke: '#5F95FF',
                strokeWidth: 1,
                fill: '#fff',
                style: {
                  visibility: 'hidden',
                },
              },
            },
          },
        },
        items: [
          { id: 'top', group: 'top' },
          { id: 'right', group: 'right' },
          { id: 'bottom', group: 'bottom' },
          { id: 'left', group: 'left' },
        ],
      },
      ...config,
    }

    return this.graph.value.createNode(defaultConfig)
  }

  // 方法2：添加节点
  addNode(nodeConfig, position = { x: 100, y: 100 }) {
    const node = this.createNode(nodeConfig)
    node.position(position.x, position.y)
    return this.graph.value.addNode(node)
  }

  // 方法3：删除节点
  removeNode(nodeId) {
    if (Array.isArray(nodeId)) {
      // 批量删除
      this.graph.value.removeCells(nodeId)
    } else {
      // 单个删除
      this.graph.value.removeCell(nodeId)
    }
  }

  // 获取当前graph实例
  getGraph() {
    return this.graph.value
  }
}